<template>
  <div class="warp_auto">
    <div  class="warp_top">
      <div class="jiansuo-box">
        <span class="label">统计方式：</span>
        <el-select v-model="selectType"   class="input">
          <el-option v-for="item in typeList" :key="item.id" :label="item.label"  :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="jiansuo-box" v-if='selectType==="月"'>
        <span class="label">日期：</span>
        <el-date-picker v-model="year" type="year" class="input" placeholder="选择年" value-format="yyyy" format="yyyy"></el-date-picker>
        <span  class="line" >-</span>
        <el-select v-model="month" class="input">
          <el-option v-for="item in monthList" :key="item.id" :label="item.label"   :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="jiansuo-box" v-else-if='selectType==="年"'>
        <span class="label">日期：</span>
        <el-date-picker class="el-input"  v-model="year" type="year" placeholder="选择年" format="yyyy" value-format="yyyy"></el-date-picker>
      </div>
      <div class="jiansuo-box">
        <el-button type="primary" @click="onSubmit" icon="el-icon-search" class="btn">检索</el-button>
      </div>
    </div>
    <!--    -->
    <el-card shadow="never">
      <el-popover
        placement="top-start"
        width="60"
        trigger="hover"
        content="导出到Excel表"
        style="float: right"
      >
        <el-button type="primary"  style="margin-bottom:10px;" @click="Excel" slot="reference">导出
          <i class="el-icon-question"></i>
        </el-button>
      </el-popover>
      <el-table :data="dataarr" stripe height="500" style="width: 100%" :header-cell-style="{background:'#d2e0f9',color:'#606266'}">
        <el-table-column label="序号"  min-width="10%" >
          <template slot-scope="scope">
            <span>{{scope.$index+1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="住院号"  min-width="35%" >
          <template slot-scope="scope">
            <span>{{scope.row.visit_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="患者姓名" min-width="35%">
          <template slot-scope="scope">
            <span>{{scope.row.name }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-pagination
      class="paging"
      :current-page="start"
      :page-size="PageSize"
      :pager-count="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

  </div>
</template>
<script>
import { dateUtils }  from "@/utils/dateUtils";
import {
  CrrtFind, patientgetList
} from "@/api/table";
import axios from "axios";
import {getTenantId} from "@/utils/auth";
export default {
  data() {
    return {
      start: 1, // 默认显示第几页
      totalCount: 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
      pgeSizes: [10, 20, 30, 40], // 个数选择器（可修改）
      PageSize: 10, // 默认每页显示的条数（可修改）
      selectType: "月",//类型
      month: "",//月
      year: "",//年
      dataarr:[],
      typeList: [
        {
          id: "0",
          value: "月",
          label: "月",
        },
        {
          id: "2",
          value: "年",
          label: "年",
        }
      ],
      monthList: [
        {
          id: "1",
          value: "01",
          label: "01",
        },
        {
          id: "2",
          value: "02",
          label: "02",
        },
        {
          id: "3",
          value: "03",
          label: "03",
        },
        {
          id: "4",
          value: "04",
          label: "04",
        },
        {
          id: "5",
          value: "05",
          label: "05",
        },
        {
          id: "6",
          value: "06",
          label: "06",
        },
        {
          id: "7",
          value: "07",
          label: "07",
        },
        {
          id: "8",
          value: "08",
          label: "08",
        },
        {
          id: "9",
          value: "09",
          label: "09",
        },
        {
          id: "10",
          value: "10",
          label: "10",
        },
        {
          id: "11",
          value: "11",
          label: "11",
        },
        {
          id: "12",
          value: "12",
          label: "12",
        },
      ],
    };
  },
  created() {
    this.getCurrentYear();
    this.getCurrentMonth();
    //进入页面需要传默认参数
    this.onSubmit();
  },
  mounted() {
  },
  watch: {
    selectType: function (newVal, oldVal) {
      this.selectType = newVal;
    },
    year: function (newVal, oldVal) {
      this.year=newVal+"";
    },
    month: function (newVal, oldVal) {
      this.month=newVal;
    },
  },
  methods: {
    getCurrentMonth() {
      this.month = dateUtils(4,null);
    },
    getCurrentYear() {
      this.year = dateUtils(3,null)+"";
    },
    //搜索
    onSubmit() {
     this.list(this.PageSize,this.start);
    },
    //查询
    list(pageSize, start) {
      CrrtFind({
        type: this.selectType,
        month: this.month,
        year: this.year,
        size: pageSize,
        start: start,
      }).then((res) => {
        this.dataarr = res.data;
        this.totalCount = res.totalCount;
      })
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 点击每页显示的条数时，显示第一页
      this.list(val, 1);
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.start = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      this.visitId = "";
      this.visitIdname = "";
      // 改变默认的页数
      this.start = val;
      // 切换页码时，要获取每页显示的条数
      this.list(this.PageSize, (this.start = val));
    },
    //导出
    Excel(){
      axios({
        url: "/api/qualityControl/getCrrtExcel", //打包
        method: "post",
        responseType: "blob",  //也可以使用blob
        headers:{
          'tenantId' : getTenantId()
        },
        data: {
          type: this.selectType,
          month: this.month,
          year: this.year
        }
      })
        .then((res) => {
          console.log(res);
          if (res) {
            let blob = new Blob([res.data], {
              type: "application/vnd.ms-excel;charset=utf-8",
            }); // res就是接口返回的文件流了
            let objectUrl = URL.createObjectURL(blob);
            const elink = document.createElement("a");
            var excelName="";
            if(this.selectType=='月'){
              excelName=this.year+"年"+this.month+"月";
            }else{
              excelName=this.year+"年";
            }
            elink.download =excelName+ "CRRT统计信息.xls"; //下载文件名称,
            elink.style.display = "none";
            elink.href = objectUrl;
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
}
</script>
